<div fxFlexFill fxLayout="row" class="" (window:resize)="onResize()">
  <aside fxFlex="15%" fxLayout="column" class="turbine-list">
    <div class="bg" fxFlexFill fxLayout="column">
      <div class="turbine-list-farm" fxFlex="37%" fxLayout="column">
        <div class="title">{{currentFarm?.farmName}}</div>
        <div class="scrollbar">
          <p>总装机容量<i>(MW)</i><span>{{currentFarm?.capacity}}</span></p>
          <p>日发电量(万kWh)<span>{{currentFarm?.powerDay.value*ratio | number:'1.1-2'}}</span></p>
          <!--<p>总发电量(万kWh)<span>{{currentFarm?.communication.value*ratio | number:'1.1-2'}}</span></p>-->
          <p>有功功率(MW)<span>{{currentFarm?.totalPower.value | number:'1.1-2'}}</span></p>
          <p>辐射量(w/㎡)<span>{{currentFarm?.radiantQuantity.value | number:'1.1-2'}}</span></p>
          <div class="phase" *ngFor="let phase of tempLimitedPhases let i =index">
            <!--<p>{{phase.name}}并网有功P(MW)<span>{{phase?.GridMerPower.value | number:'1.1-2'}}</span></p>
            <p>{{phase.name}}并网无功Q(kVar)<span>{{phase?.GriReaPower.value | number:'1.1-2'}}</span></p>
            <p>{{phase.name}}日发电量(kWh)<span>{{phase?.powerDay.value | number:'1.1-2'}}</span></p>-->
            <p *ngIf="tempLimitedPhases.length>1">{{phase.name}}有功功率(MW)<span>{{phase?.powers.value | number:'1.1-2'}}</span></p>
            <p *ngIf="tempLimitedPhases.length>1">{{phase.name}}辐射量(w/㎡)<span>{{phase?.radiantQuantity.value | number:'1.1-2'}}</span></p>
          </div>
        </div>
      </div>

      <div class="turbine-list-formInfo turbine-statu" fxFlex="21%" fxLayout="column">
        <div class="title"><b></b>逆变器状态(台)
        </div>
        <div class="scrollbar">
          <p *ngFor="let turbStatu of limitedTurbstatus let i =index " [ngStyle]="{'color':turbStatu.color}" [ngClass]="{'isChecked':turbStatu?.isChecked}"
             (click)="turbStatuClick($event,turbStatu)">
            <strong [ngStyle]="{'background-color':turbStatu.color}"></strong> {{turbStatu.name}}
            <span>{{turbStatu.tole}}</span>
          </p>
        </div>
      </div>
      <div class="turbine-list-formInfo stages" fxFlex="18%" fxLayout="column">
        <div class="title"><b></b>建设分期(台)
        </div>
        <div class="scrollbar">
          <div class="force-overflow">
            <p *ngFor="let phase of tempLimitedPhases let i =index" [ngClass]="{'isChecked':phase?.isChecked}" (click)="phaseClick($event,phase)">
              <!--<input type="checkbox" (click)="turbStatuClick($event,phase)"/>-->
              {{phase.name}}
              <span>{{phase.value}}</span>
            </p>
          </div>
        </div>
      </div>
      <!--<div class="scrollbar" id="style-2">-->
      <div class="turbine-list-formInfo circuit" fxFlex="24%" fxLayout="column">
        <div class="title"><b></b>集电线路(台)
        </div>
        <div class="scrollbar">
          <p *ngFor="let circuit of result let i =index" [ngClass]="{'isChecked':circuit?.isChecked}" (click)="circuitClick($event,circuit)">
            <!--<input type="checkbox" (click)="turbStatuClick($event,circuit)"/>-->
            {{circuit.name}}
            <span>{{circuit.value}}</span>
          </p>
        </div>
      </div>
    </div>
  </aside>
  <section fxFlex="85%" fxLayout="column" class="turbine-list-right">
    <header>
      <app-farm-selector [farmId]="farmId" (currentFarmChange)="onChangeFarm($event)" [farmCategory]="farmCategory"></app-farm-selector>
    </header>
    <main class="scrollbar turbine-list-rl" #main>
      <div class="scrollbar-trubineList" id="style-3">
        <div class="trubineList force-overflow-trubineList">
          <section class="turbine">
            <!--区域-->
            <div class="region" *ngFor="let CheckDeviceSubArray of allCheckDeviceSubArrayList;let i=index" [ngStyle]="{zoom:zoom}">
              <div class="regionName">{{CheckDeviceSubArray[0].subArrayName}}</div>
              <div class="regionList">
                <p *ngFor="let item of CheckDeviceSubArray;let i=index">
                  <app-device class="inverter-content"
                              (dblclick)="ondblclick(item.device)"
                              [deviceName]="item.device.deviceName"
                              [statusColor]="item.turbStatusColor"
                              [turbineStatus]="item.turbineStatus"
                              [powerDay]="item.powerDay.value"
                              [GridMerPower]="item.GridMerPower.value"
                              [farmId]="farmId"
                              [GriReaPower]="item.GriReaPower.value"></app-device>
                </p>
              </div>
            </div>

          </section>
        </div>
      </div>

    </main>
  </section>

</div>
